<template>
	<view class="cat-list">
		<scroll-view scroll-y="true" class="c-left" >
			<view v-for="(item,index) in leftList" :class="leftindex==index?'active left_item':'left_item'" :key="item+index" @click="handleLeftclick(item,index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="c-right">
			<view class="list-box">
				<view v-for="(item,index) in rightList" :key="index" class="list-item">
					<Product :product="item" :changeflg="true"></Product>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Product from '@/components/Product/Product.vue'
	export default {
		components:{
			Product
		},
		data() {
			return {
				leftList:[],
				leftindex:0,
				rightList:[],
				id:'',
				pageNum:0,
				pageSize:10,
				pageCount:0,
				
			}
		},
		mounted() {
			this.getLeftList()
		},
		methods: {
			getLeftList(){
				this.$http.getCategoryList().then(res=>{
					this.leftList  = res.data
					this.id = res.data[0]._id
					this.getRightList()
				})
			},
			handleLeftclick(item,index){
				this.id = item._id
				this.leftindex = index
				this.pageNum = 0
				this.rightList = []
				this.getRightList()
				
			},
			getRightList(){
				this.$http.getCategoryProduct({id:this.id,pageNUm:this.pageNum}).then(res=>{
					this.rightList  = [...this.rightList,...res.data]
					this.pageCount = res.count
				})
			},
			scrollBottom(){
			    // 触底的时候请求数据，即为上拉加载更多
			    var allTotal = this.pageNum * this.pageSize
			    if(allTotal < this.pageCount){
			   this.allListItem = false;    
			        this.pageNum ++;    
			         this.getGoodList(this.usertoken); 
			    }else{
			        this.allListItem = true;
			    }
			},
		}
	}
</script>

<style scoped>
	.cat-list{
		display: flex;
		
	}
	.c-left{
		width: 20%;
		height: calc(100vh - 190rpx);
		background-color: rgb(245, 245, 245);
	}
	.c-left .left_item{
		text-align: center;
		padding: 30rpx 0 ;
		font-size: 28rpx;
		color: #666;
	}
	.c-left .left_item.active{
		background-color: #fff;
		color:  #3c9cff;
	}
	.c-right{
		width: 80%;
		height: calc(100vh - 190rpx);
	}
	.c-right .list-box{
		padding: 10rpx;
	}
	navigator.change uni-image{
		height: 200rpx;
	}
</style>
